<template>
  <uni-popup
    ref="popup"
    type="center"
    :mask-click="false"
    background-color="#fff"
    border-radius="20rpx"
  >
    <view class="settings-popup">
      <view class="popup-header">
        <text class="popup-title">⚙️ 游戏设置</text>
        <text class="close-btn" @click="closePopup">✕</text>
      </view>
      
      <scroll-view class="settings-content" scroll-y>
        <!-- 游戏时间设置 -->
        <view class="setting-item">
          <view class="setting-label">
            <text class="label-text">⏰ 游戏时间</text>
            <text class="label-desc">{{ gameTime === 0 ? '无限模式' : `${gameTime}秒` }}</text>
          </view>
          <slider 
            :value="gameTime" 
            :min="0" 
            :max="300" 
            :step="30"
            @change="onGameTimeChange"
            activeColor="#007AFF"
            block-color="#007AFF"
            block-size="28"
          />
        </view>

        <!-- 表情生成速度 -->
        <view class="setting-item">
          <view class="setting-label">
            <text class="label-text">🎯 生成速度</text>
            <text class="label-desc">{{ emojiSpeed }}毫秒</text>
          </view>
          <slider 
            :value="emojiSpeed" 
            :min="100" 
            :max="2000" 
            :step="100"
            @change="onEmojiSpeedChange"
            activeColor="#007AFF"
            block-color="#007AFF"
            block-size="28"
          />
        </view>

        <!-- 最大表情数 -->
        <view class="setting-item">
          <view class="setting-label">
            <text class="label-text">🎪 最大表情数</text>
            <text class="label-desc">{{ maxEmojis }}个</text>
          </view>
          <slider 
            :value="maxEmojis" 
            :min="3" 
            :max="15" 
            :step="1"
            @change="onMaxEmojisChange"
            activeColor="#007AFF"
            block-color="#007AFF"
            block-size="28"
          />
        </view>

        <!-- 表情大小 -->
        <view class="setting-item">
          <view class="setting-label">
            <text class="label-text">📏 表情大小</text>
            <text class="label-desc">{{ emojiSizeMin }}-{{ emojiSizeMax }}rpx</text>
          </view>
          <view class="size-sliders">
            <view class="size-row">
              <text class="size-label">最小:</text>
              <slider 
                :value="emojiSizeMin" 
                :min="50" 
                :max="150" 
                :step="10"
                @change="onEmojiSizeMinChange"
                activeColor="#007AFF"
                block-color="#007AFF"
                block-size="24"
                class="size-slider"
              />
            </view>
            <view class="size-row">
              <text class="size-label">最大:</text>
              <slider 
                :value="emojiSizeMax" 
                :min="80" 
                :max="200" 
                :step="10"
                @change="onEmojiSizeMaxChange"
                activeColor="#007AFF"
                block-color="#007AFF"
                block-size="24"
                class="size-slider"
              />
            </view>
          </view>
        </view>

        <!-- 自动消失时间 -->
        <view class="setting-item">
          <view class="setting-label">
            <text class="label-text">⏱️ 自动消失</text>
            <text class="label-desc">{{ autoPopTime === 0 ? '不消失' : `${autoPopTime}秒` }}</text>
          </view>
          <slider 
            :value="autoPopTime" 
            :min="0" 
            :max="10" 
            :step="1"
            @change="onAutoPopTimeChange"
            activeColor="#007AFF"
            block-color="#007AFF"
            block-size="28"
          />
        </view>
      </scroll-view>

      <view class="popup-footer">
        <button class="reset-btn" @click="resetToDefault">恢复默认</button>
        <button class="save-btn" @click="saveSettings">保存设置</button>
      </view>
    </view>
  </uni-popup>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import type { GameSettings } from '@/api/gameSettings'
import { getUserGameSettings, saveUserGameSettings } from '@/api/gameSettings'

interface Props {
  gameCode: string
}

const props = defineProps<Props>()
const emit = defineEmits<{
  settingsChanged: [settings: GameSettings]
}>()

const popup = ref()

// 游戏设置数据
const gameTime = ref(60)
const emojiSpeed = ref(300)
const maxEmojis = ref(8)
const emojiSizeMin = ref(80)
const emojiSizeMax = ref(120)
const autoPopTime = ref(5)

// 默认设置
const defaultSettings = {
  gameTime: 60,
  emojiSpeed: 300,
  maxEmojis: 8,
  emojiSizeMin: 80,
  emojiSizeMax: 120,
  autoPopTime: 5
}

// 打开弹窗
const openPopup = async () => {
  try {
    const settings = await getUserGameSettings(props.gameCode)
    if (settings) {
      gameTime.value = settings.gameTime
      emojiSpeed.value = settings.emojiSpeed
      maxEmojis.value = settings.maxEmojis
      emojiSizeMin.value = settings.emojiSizeMin || 80
      emojiSizeMax.value = settings.emojiSizeMax || 120
      autoPopTime.value = settings.autoPopTime || 5
    }
  } catch (error) {
    console.error('获取游戏设置失败:', error)
  }
  popup.value?.open()
}

// 关闭弹窗
const closePopup = () => {
  popup.value?.close()
}

// 滑动条事件处理
const onGameTimeChange = (e: any) => {
  gameTime.value = Number(e.detail.value)
}

const onEmojiSpeedChange = (e: any) => {
  emojiSpeed.value = Number(e.detail.value)
}

const onMaxEmojisChange = (e: any) => {
  maxEmojis.value = Number(e.detail.value)
}

const onEmojiSizeMinChange = (e: any) => {
  const newMin = Number(e.detail.value)
  if (newMin <= emojiSizeMax.value) {
    emojiSizeMin.value = newMin
  }
}

const onEmojiSizeMaxChange = (e: any) => {
  const newMax = Number(e.detail.value)
  if (newMax >= emojiSizeMin.value) {
    emojiSizeMax.value = newMax
  }
}

const onAutoPopTimeChange = (e: any) => {
  autoPopTime.value = Number(e.detail.value)
}

// 恢复默认设置
const resetToDefault = () => {
  gameTime.value = defaultSettings.gameTime
  emojiSpeed.value = defaultSettings.emojiSpeed
  maxEmojis.value = defaultSettings.maxEmojis
  emojiSizeMin.value = defaultSettings.emojiSizeMin
  emojiSizeMax.value = defaultSettings.emojiSizeMax
  autoPopTime.value = defaultSettings.autoPopTime
}

// 保存设置
const saveSettings = async () => {
  try {
    const settings: GameSettings = {
      gameCode: props.gameCode,
      gameTime: gameTime.value,
      emojiSpeed: emojiSpeed.value,
      maxEmojis: maxEmojis.value,
      emojiSizeMin: emojiSizeMin.value,
      emojiSizeMax: emojiSizeMax.value,
      autoPopTime: autoPopTime.value
    }
    
    await saveUserGameSettings(props.gameCode, settings)
    emit('settingsChanged', settings)
    
    uni.showToast({
      title: '设置已保存',
      icon: 'success'
    })
    
    closePopup()
  } catch (error) {
    console.error('保存游戏设置失败:', error)
    uni.showToast({
      title: '保存失败',
      icon: 'error'
    })
  }
}

// 导出方法供父组件调用
defineExpose({
  openPopup
})
</script>

<style scoped>
.settings-popup {
  width: 90vw;
  max-width: 700rpx;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 32rpx;
  overflow: hidden;
  backdrop-filter: blur(20rpx);
  border: 1rpx solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 24rpx 80rpx rgba(0, 0, 0, 0.15);
}

.popup-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 40rpx;
  background: linear-gradient(135deg, #fd79a8, #fdcb6e);
  color: white;
}

.popup-title {
  font-size: 40rpx;
  font-weight: 700;
  text-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.2);
}

.close-btn {
  font-size: 44rpx;
  width: 68rpx;
  height: 68rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  transition: all 0.3s ease;
  
  &:active {
    background: rgba(255, 255, 255, 0.3);
    transform: scale(0.95);
  }
}

.settings-content {
  max-height: 900rpx;
  padding: 40rpx;
}

.setting-item {
  margin-bottom: 60rpx;
  padding: 32rpx;
  background: rgba(255, 255, 255, 0.6);
  border-radius: 24rpx;
  border: 1rpx solid rgba(0, 0, 0, 0.05);
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.05);
}

.setting-label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24rpx;
}

.label-text {
  font-size: 34rpx;
  font-weight: 600;
  color: #333;
}

.label-desc {
  font-size: 30rpx;
  color: #fd79a8;
  font-weight: 700;
  background: linear-gradient(135deg, #fd79a8, #fdcb6e);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.size-sliders {
  margin-top: 16rpx;
  padding: 20rpx;
  background: rgba(255, 255, 255, 0.8);
  border-radius: 16rpx;
}

.size-row {
  display: flex;
  align-items: center;
  margin-bottom: 24rpx;
}

.size-label {
  font-size: 28rpx;
  color: #666;
  font-weight: 500;
  width: 100rpx;
}

.size-slider {
  flex: 1;
  margin-left: 24rpx;
}

.popup-footer {
  display: flex;
  padding: 40rpx;
  background: rgba(248, 249, 250, 0.9);
  gap: 24rpx;
  backdrop-filter: blur(10rpx);
}

.reset-btn, .save-btn {
  flex: 1;
  height: 88rpx;
  border-radius: 44rpx;
  border: none;
  font-size: 34rpx;
  font-weight: 700;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 6rpx 20rpx rgba(0, 0, 0, 0.1);
}

.reset-btn {
  background: rgba(245, 245, 245, 0.9);
  color: #666;
  border: 1rpx solid rgba(0, 0, 0, 0.1);
}

.save-btn {
  background: linear-gradient(135deg, #fd79a8, #fdcb6e);
  color: white;
  box-shadow: 0 6rpx 20rpx rgba(253, 121, 168, 0.3);
}

.reset-btn:active {
  background: rgba(235, 235, 235, 0.9);
  transform: translateY(2rpx) scale(0.98);
}

.save-btn:active {
  transform: translateY(2rpx) scale(0.98);
  box-shadow: 0 3rpx 10rpx rgba(253, 121, 168, 0.4);
}
</style>